<template>
  <div class="account-info-page">
    <!-- 头部 -->
    <div class="account-header">
      <div class="back-button" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
      </div>
      <h2 class="page-title">账号与安全</h2>
    </div>

    <!-- 账号信息 -->
    <div class="section">
      <div class="section-title">账号信息</div>
      <div class="card">
        <div class="list-item" @click="handleNicknameClick">
          <div class="item-left">
            <div class="item-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="item-label">用户昵称</div>
          </div>
          <div class="item-right">
            <span class="item-value">{{ userInfo.nickname || '未设置' }}</span>
            <el-icon class="arrow-icon"><ArrowRight /></el-icon>
          </div>
        </div>
        <div class="divider"></div>
        <div class="list-item" @click="handlePhoneClick">
          <div class="item-left">
            <div class="item-icon">
              <el-icon><Phone /></el-icon>
            </div>
            <div class="item-label">手机号绑定</div>
          </div>
          <div class="item-right">
            <span class="item-value">{{ phoneNumber || '未绑定' }}</span>
            <el-icon class="arrow-icon"><ArrowRight /></el-icon>
          </div>
        </div>
        <div class="divider"></div>
        <div class="list-item" @click="handleEmailClick">
          <div class="item-left">
            <div class="item-icon">
              <el-icon><Message /></el-icon>
            </div>
            <div class="item-label">邮箱绑定</div>
          </div>
          <div class="item-right">
            <span class="item-value">{{ emailDisplay || '未绑定' }}</span>
            <el-icon class="arrow-icon"><ArrowRight /></el-icon>
          </div>
        </div>
        <div class="divider"></div>
        <div class="list-item" @click="handlePasswordClick">
          <div class="item-left">
            <div class="item-icon">
              <el-icon><Lock /></el-icon>
            </div>
            <div class="item-label">密码设置</div>
          </div>
          <div class="item-right">
            <span class="item-value">{{ hasPassword ? '已设置' : '未设置' }}</span>
            <el-icon class="arrow-icon"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
    </div>

    <!-- 手机号编辑对话框 -->
    <PhoneNumberInput
      v-model:visible="phoneDialogVisible"
      @confirm="handlePhoneInputConfirm"
      @cancel="handlePhoneInputCancel"
    />

    <!-- 邮箱编辑对话框 -->
    <EmailInput
      v-model:visible="emailDialogVisible"
      @confirm="handleEmailInputConfirm"
      @cancel="handleEmailInputCancel"
    />

    <!-- 密码修改对话框 -->
    <el-dialog
      v-model="passwordDialogVisible"
      title="修改密码"
      width="90%"
      :max-width="400"
      :close-on-click-modal="false"
    >
      <el-form :model="passwordForm" label-width="100px" :rules="passwordRules" ref="passwordFormRef">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            v-model="passwordForm.oldPassword"
            type="password"
            placeholder="请输入原密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            placeholder="请输入新密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            placeholder="请再次输入新密码"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="passwordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handlePasswordSubmit" :loading="passwordLoading">确定</el-button>
      </template>
    </el-dialog>

    <!-- 手机号更换确认对话框 -->
    <ConfirmDialog
      v-model:visible="showPhoneReplaceDialog"
      title="更换已经绑定的手机?"
      :content="maskedPhoneForDialog"
      confirm-text="更换"
      cancel-text="取消"
      @confirm="confirmReplacePhone"
      @cancel="cancelReplacePhone"
    />

    <!-- 用户昵称修改确认对话框 -->
    <ConfirmDialog
      v-model:visible="showNicknameReplaceDialog"
      title="修改用户昵称?"
      :content="`当前用户昵称：${userInfo.nickname || '未设置'}`"
      confirm-text="修改"
      cancel-text="取消"
      :editable="true"
      edit-type="nickname"
      :initial-value="userInfo.nickname || ''"
      @confirm="handleNicknameEditConfirm"
      @cancel="cancelReplaceNickname"
    />

    <!-- 邮箱更换确认对话框 -->
    <ConfirmDialog
      v-model:visible="showEmailReplaceDialog"
      title="更换已经绑定的邮箱?"
      :content="maskedEmailForDialog"
      confirm-text="更换"
      cancel-text="取消"
      @confirm="confirmReplaceEmail"
      @cancel="cancelReplaceEmail"
    />

    <!-- 密码修改确认对话框 -->
    <ConfirmDialog
      v-model:visible="showPasswordReplaceDialog"
      title="修改密码?"
      content="修改密码后需要重新登录"
      confirm-text="修改"
      cancel-text="取消"
      :editable="true"
      edit-type="password"
      :error-message="passwordError"
      @confirm="handlePasswordEditConfirm"
      @cancel="cancelReplacePassword"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import ConfirmDialog from '@/components/ConfirmDialog.vue'
import PhoneNumberInput from '@/components/PhoneNumberInput.vue'
import EmailInput from '@/components/EmailInput.vue'
import {
  ArrowLeft,
  ArrowRight,
  Phone,
  User,
  Lock,
  Message
} from '@element-plus/icons-vue'
import { getUserProfile, updateUserProfile, updateUserPwd } from '@/api/system/user'
import { getUserInfo, logout, setUserInfo } from '@/utils/auth'

const router = useRouter()

// 用户信息
const userInfo = ref({
  userId: null,
  username: '',
  nickname: '',
  realName: '',
  phone: '',
  email: ''
})

// 对话框显示状态
const phoneDialogVisible = ref(false)
const emailDialogVisible = ref(false)
const passwordDialogVisible = ref(false)

// 加载状态
const nicknameLoading = ref(false)
const phoneLoading = ref(false)
const emailLoading = ref(false)
const passwordLoading = ref(false)

// 错误信息
const passwordError = ref('')

// 确认对话框显示状态
const showPhoneReplaceDialog = ref(false)
const showNicknameReplaceDialog = ref(false)
const showEmailReplaceDialog = ref(false)
const showPasswordReplaceDialog = ref(false)

// 表单数据
const nicknameForm = ref({
  nickname: ''
})

const phoneForm = ref({
  phone: ''
})

const emailForm = ref({
  email: ''
})

const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const passwordFormRef = ref(null)

// 密码验证规则
const passwordRules = {
  oldPassword: [
    { required: true, message: '请输入原密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.value.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 计算属性
const phoneNumber = computed(() => {
  const phone = userInfo.value.phone
  // 检查phone是否存在且不为空
  if (phone !== null && phone !== undefined && phone !== '') {
    // 手机号脱敏显示
    const phoneStr = String(phone).trim()
    if (phoneStr.length === 11) {
      return phoneStr.substring(0, 3) + '****' + phoneStr.substring(7)
    } else if (phoneStr.length > 0) {
      // 如果不是11位，也显示（可能是其他格式）
      return phoneStr
    }
  }
  return ''
})

const emailDisplay = computed(() => {
  const email = userInfo.value.email
  if (email && email.trim() !== '') {
    const emailStr = String(email).trim()
    // 邮箱脱敏显示：显示@前面的前2个字符和后1个字符，中间用***代替，@后面的域名完整显示
    const atIndex = emailStr.indexOf('@')
    if (atIndex > 0) {
      const prefix = emailStr.substring(0, atIndex)
      const domain = emailStr.substring(atIndex)
      
      if (prefix.length <= 3) {
        // 如果@前面的字符少于等于3个，只显示第一个字符
        return prefix.substring(0, 1) + '***' + domain
      } else {
        // 显示前2个字符和后1个字符
        return prefix.substring(0, 2) + '***' + prefix.substring(prefix.length - 1) + domain
      }
    }
    return emailStr
  }
  return ''
})

const hasPassword = computed(() => {
  // 这里可以根据实际情况判断是否设置了密码
  return true
})

// 对话框显示的手机号（脱敏）
const maskedPhoneForDialog = computed(() => {
  const phone = userInfo.value.phone
  if (phone && phone.trim() !== '') {
    const phoneStr = String(phone).trim()
    if (phoneStr.length === 11) {
      return phoneStr.substring(0, 3) + '******' + phoneStr.substring(9)
    }
    return phoneStr
  }
  return ''
})

// 对话框显示的邮箱（脱敏）
const maskedEmailForDialog = computed(() => {
  const email = userInfo.value.email
  if (email && email.trim() !== '') {
    const emailStr = String(email).trim()
    const atIndex = emailStr.indexOf('@')
    if (atIndex > 0) {
      const prefix = emailStr.substring(0, atIndex)
      const domain = emailStr.substring(atIndex)
      
      if (prefix.length <= 3) {
        return prefix.substring(0, 1) + '***' + domain
      } else {
        return prefix.substring(0, 2) + '***' + prefix.substring(prefix.length - 1) + domain
      }
    }
    return emailStr
  }
  return ''
})

// 加载用户信息
const loadUserInfo = async () => {
  try {
    const profileResponse = await getUserProfile()
    if (profileResponse.code === 200 && profileResponse.data) {
      const profileData = profileResponse.data
      
      // 始终从 localStorage 获取备用数据，作为补充
      const storedUser = getUserInfo()
      
      // 获取手机号：优先使用 API 返回的值，如果为空则使用 localStorage 的值
      let phoneValue = profileData.phonenumber || profileData.phone || profileData.phoneNumber || profileData.mobile || profileData.telephone
      if (!phoneValue || phoneValue === null || phoneValue === undefined || String(phoneValue).trim() === '') {
        // API 返回为空，尝试从 localStorage 获取
        if (storedUser) {
          phoneValue = storedUser.phonenumber || storedUser.phone || storedUser.phoneNumber || storedUser.mobile || storedUser.telephone || ''
        } else {
          phoneValue = ''
        }
      }
      if (phoneValue) {
        phoneValue = String(phoneValue).trim()
      }
      
      // 获取邮箱：优先使用 API 返回的值，如果为空则使用 localStorage 的值
      let emailValue = profileData.email || profileData.emailAddress || profileData.mail
      if (!emailValue || emailValue === null || emailValue === undefined || String(emailValue).trim() === '') {
        // API 返回为空，尝试从 localStorage 获取
        if (storedUser) {
          emailValue = storedUser.email || storedUser.emailAddress || storedUser.mail || ''
        } else {
          emailValue = ''
        }
      }
      if (emailValue) {
        emailValue = String(emailValue).trim()
      }
      
      // 获取用户名：优先使用 API 返回的值，如果为空则使用 localStorage 的值
      let usernameValue = profileData.userName || profileData.username
      if (!usernameValue || usernameValue === null || usernameValue === undefined || String(usernameValue).trim() === '') {
        if (storedUser) {
          usernameValue = storedUser.userName || storedUser.username || ''
        } else {
          usernameValue = ''
        }
      }
      if (usernameValue) {
        usernameValue = String(usernameValue).trim()
      }
      
      // 获取昵称：优先使用 API 返回的值，如果为空则使用 localStorage 的值
      let nicknameValue = profileData.nickName || profileData.nickname
      if (!nicknameValue || nicknameValue === null || nicknameValue === undefined || String(nicknameValue).trim() === '') {
        if (storedUser) {
          nicknameValue = storedUser.nickName || storedUser.nickname || ''
        } else {
          nicknameValue = ''
        }
      }
      if (nicknameValue) {
        nicknameValue = String(nicknameValue).trim()
      }
      
      // 获取真实姓名：优先使用 API 返回的值，如果为空则使用 localStorage 的值
      let realNameValue = profileData.realName || profileData.nickName || profileData.nickname
      if (!realNameValue || realNameValue === null || realNameValue === undefined || String(realNameValue).trim() === '') {
        if (storedUser) {
          realNameValue = storedUser.realName || storedUser.nickName || storedUser.nickname || ''
        } else {
          realNameValue = ''
        }
      }
      if (realNameValue) {
        realNameValue = String(realNameValue).trim()
      }
      
      userInfo.value = {
        userId: profileData.userId || (storedUser ? storedUser.userId : null) || userInfo.value.userId,
        username: usernameValue || '',
        nickname: nicknameValue || '',
        realName: realNameValue || '',
        phone: phoneValue || '',
        email: emailValue || ''
      }
      
      // 更新 localStorage，确保数据同步
      const updatedUserInfo = {
        userId: userInfo.value.userId,
        userName: userInfo.value.username,
        username: userInfo.value.username,
        nickName: userInfo.value.nickname,
        nickname: userInfo.value.nickname,
        realName: userInfo.value.realName,
        phonenumber: userInfo.value.phone,
        phone: userInfo.value.phone,
        phoneNumber: userInfo.value.phone,
        mobile: userInfo.value.phone,
        telephone: userInfo.value.phone,
        email: userInfo.value.email,
        emailAddress: userInfo.value.email,
        mail: userInfo.value.email
      }
      setUserInfo(updatedUserInfo)
      
      return
    }
  } catch (apiError) {
    // API获取失败，使用本地存储
  }

  // 回退到localStorage - 只在API失败时使用
  const storedUser = getUserInfo()
  if (storedUser) {
    userInfo.value = {
      userId: storedUser.userId || userInfo.value.userId,
      username: storedUser.userName || storedUser.username || userInfo.value.username || '',
      nickname: storedUser.nickName || storedUser.nickname || userInfo.value.nickname || '',
      realName: storedUser.realName || storedUser.nickName || storedUser.nickname || userInfo.value.realName || '',
      phone: storedUser.phonenumber || storedUser.phone || storedUser.phoneNumber || storedUser.mobile || storedUser.telephone || userInfo.value.phone || '',
      email: storedUser.email || storedUser.emailAddress || storedUser.mail || userInfo.value.email || ''
    }
  }
}

// 返回个人中心
const goBack = () => {
  router.push('/profile')
}

// 处理点击事件
const handleNicknameClick = () => {
  // 如果已经有用户昵称，先弹出确认对话框
  if (userInfo.value.nickname && userInfo.value.nickname.trim() !== '') {
    showNicknameReplaceDialog.value = true
  } else {
    // 没有用户昵称，直接打开编辑对话框
    nicknameForm.value.nickname = ''
    showNicknameReplaceDialog.value = true
  }
}

// 用户昵称编辑确认（在对话框中直接编辑）
const handleNicknameEditConfirm = (nickname) => {
  nicknameForm.value.nickname = nickname
  handleNicknameSubmit()
}

// 取消修改用户昵称
const cancelReplaceNickname = () => {
  showNicknameReplaceDialog.value = false
}

const handlePhoneClick = async () => {
  // 如果已经有手机号，先弹出确认对话框
  if (userInfo.value.phone && userInfo.value.phone.trim() !== '') {
    showPhoneReplaceDialog.value = true
  } else {
    // 没有手机号，直接打开编辑对话框
    phoneForm.value.phone = ''
    phoneDialogVisible.value = true
  }
}

// 确认更换手机号
const confirmReplacePhone = () => {
  showPhoneReplaceDialog.value = false
  phoneForm.value.phone = userInfo.value.phone || ''
  phoneDialogVisible.value = true
}

// 取消更换手机号
const cancelReplacePhone = () => {
  showPhoneReplaceDialog.value = false
}

// 手机号输入确认
const handlePhoneInputConfirm = (phone) => {
  phoneForm.value.phone = phone
  handlePhoneSubmit()
}

// 手机号输入取消
const handlePhoneInputCancel = () => {
  phoneDialogVisible.value = false
}

const handleEmailClick = () => {
  // 如果已经有邮箱，先弹出确认对话框
  if (userInfo.value.email && userInfo.value.email.trim() !== '') {
    showEmailReplaceDialog.value = true
  } else {
    // 没有邮箱，直接打开编辑对话框
    emailForm.value.email = ''
    emailDialogVisible.value = true
  }
}

// 确认更换邮箱
const confirmReplaceEmail = () => {
  showEmailReplaceDialog.value = false
  emailForm.value.email = userInfo.value.email || ''
  emailDialogVisible.value = true
}

// 取消更换邮箱
const cancelReplaceEmail = () => {
  showEmailReplaceDialog.value = false
}

// 邮箱输入确认
const handleEmailInputConfirm = (email) => {
  emailForm.value.email = email
  handleEmailSubmit()
}

// 邮箱输入取消
const handleEmailInputCancel = () => {
  emailDialogVisible.value = false
}

const handlePasswordClick = () => {
  // 弹出确认对话框
  showPasswordReplaceDialog.value = true
}

// 密码编辑确认（在对话框中直接编辑）
const handlePasswordEditConfirm = (passwordData) => {
  passwordForm.value = {
    oldPassword: passwordData.oldPassword,
    newPassword: passwordData.newPassword,
    confirmPassword: passwordData.confirmPassword
  }
  passwordError.value = '' // 清除之前的错误信息
  handlePasswordSubmit()
}

// 取消修改密码
const cancelReplacePassword = () => {
  showPasswordReplaceDialog.value = false
  passwordError.value = ''
  passwordForm.value = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  }
}

// 提交表单
const handleNicknameSubmit = async () => {
  if (!nicknameForm.value.nickname || nicknameForm.value.nickname.trim() === '') {
    ElMessage.warning('请输入用户昵称')
    return
  }

  nicknameLoading.value = true
  try {
    const response = await updateUserProfile({
      nickName: nicknameForm.value.nickname.trim()
    })
    
    if (response.code === 200) {
      ElMessage.success('用户昵称修改成功')
      showNicknameReplaceDialog.value = false
      // 重新加载用户信息，确保数据同步
      await loadUserInfo()
      // 触发用户信息更新事件
      window.dispatchEvent(new Event('userInfoUpdated'))
    }
    // 注意：如果 response.code !== 200，响应拦截器已经显示了错误消息，这里不需要再次显示
  } catch (error) {
    // 只有网络错误或其他异常才会进入这里，响应拦截器已经处理了业务错误
    // 如果错误消息已经被拦截器显示过，这里就不再显示
    if (error.message && !error.message.includes('系统未知错误') && !error.message.includes('后端接口连接异常') && !error.message.includes('系统接口请求超时')) {
      // 这个错误消息可能已经被拦截器显示过了，不再重复显示
      console.error('修改用户昵称失败:', error)
    }
  } finally {
    nicknameLoading.value = false
  }
}

const handlePhoneSubmit = async () => {
  const phone = phoneForm.value.phone.trim()
  
  if (!phone) {
    ElMessage.warning('请输入手机号')
    return
  }

  // 验证手机号格式
  const phoneRegex = /^1[3-9]\d{9}$/
  if (!phoneRegex.test(phone)) {
    ElMessage.warning('请输入正确的手机号')
    return
  }

  phoneLoading.value = true
  try {
    const response = await updateUserProfile({
      phonenumber: phone
    })
    
    if (response.code === 200) {
      ElMessage.success('手机号绑定成功')
      phoneDialogVisible.value = false
      // 等待一小段时间确保后端数据已更新，然后重新加载用户信息
      setTimeout(async () => {
        await loadUserInfo()
      }, 300)
      // 触发用户信息更新事件
      window.dispatchEvent(new Event('userInfoUpdated'))
    }
    // 注意：如果 response.code !== 200，响应拦截器已经显示了错误消息，这里不需要再次显示
  } catch (error) {
    // 只有网络错误或其他异常才会进入这里，响应拦截器已经处理了业务错误
    // 如果错误消息已经被拦截器显示过，这里就不再显示
    if (error.message && !error.message.includes('系统未知错误') && !error.message.includes('后端接口连接异常') && !error.message.includes('系统接口请求超时')) {
      // 这个错误消息可能已经被拦截器显示过了，不再重复显示
      console.error('绑定手机号失败:', error)
    }
  } finally {
    phoneLoading.value = false
  }
}

const handleEmailSubmit = async () => {
  const email = emailForm.value.email.trim()
  
  if (!email) {
    ElMessage.warning('请输入邮箱地址')
    return
  }

  // 验证邮箱格式
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(email)) {
    ElMessage.warning('请输入正确的邮箱地址')
    return
  }

  emailLoading.value = true
  try {
    const response = await updateUserProfile({
      email: email
    })
    
    if (response.code === 200) {
      ElMessage.success('邮箱绑定成功')
      emailDialogVisible.value = false
      // 等待一小段时间确保后端数据已更新，然后重新加载用户信息
      setTimeout(async () => {
        await loadUserInfo()
      }, 300)
      // 触发用户信息更新事件
      window.dispatchEvent(new Event('userInfoUpdated'))
    }
    // 注意：如果 response.code !== 200，响应拦截器已经显示了错误消息，这里不需要再次显示
  } catch (error) {
    // 只有网络错误或其他异常才会进入这里，响应拦截器已经处理了业务错误
    // 如果错误消息已经被拦截器显示过，这里就不再显示
    if (error.message && !error.message.includes('系统未知错误') && !error.message.includes('后端接口连接异常') && !error.message.includes('系统接口请求超时')) {
      // 这个错误消息可能已经被拦截器显示过了，不再重复显示
      console.error('绑定邮箱失败:', error)
    }
  } finally {
    emailLoading.value = false
  }
}

const handlePasswordSubmit = async () => {
  // 清除之前的错误信息
  passwordError.value = ''
  
  if (!passwordForm.value.oldPassword || !passwordForm.value.newPassword || !passwordForm.value.confirmPassword) {
    passwordError.value = '请填写完整的密码信息'
    return
  }

  if (passwordForm.value.newPassword.length < 6 || passwordForm.value.newPassword.length > 20) {
    passwordError.value = '密码长度在 6 到 20 个字符'
    return
  }

  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    passwordError.value = '两次输入的密码不一致'
    return
  }

  passwordLoading.value = true
  try {
    const response = await updateUserPwd(
      passwordForm.value.oldPassword,
      passwordForm.value.newPassword
    )
    
    if (response.code === 200) {
      ElMessage.success('密码修改成功，请重新登录')
      // 退出登录
      logout()
      // 跳转到登录页
      router.push('/login')
    } else {
      // 修改失败，保持对话框打开，显示错误信息
      passwordError.value = response.msg || '密码修改失败，请稍后重试'
    }
  } catch (error) {
    // 修改失败，保持对话框打开，显示错误信息
    passwordError.value = error.response?.data?.msg || error.message || '密码修改失败，请稍后重试'
  } finally {
    passwordLoading.value = false
  }
}

onMounted(async () => {
  await loadUserInfo()
})
</script>

<style lang="scss" scoped>
.account-info-page {
  min-height: calc(100vh - 100px);
  padding-bottom: 20px;
  background: transparent; /* 透明背景，显示全局渐变背景 */
  
  .account-header {
    display: flex;
    align-items: center;
    padding: 16px 0 24px 0;
    margin-bottom: 8px;
    position: relative;
    
    .back-button {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 50%;
      transition: all 0.3s ease;
      color: #303133;
      
      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }
      
      &:active {
        transform: scale(0.95);
      }
      
      .el-icon {
        font-size: 20px;
      }
    }
    
    .page-title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 22px;
      font-weight: 600;
      color: #303133;
      margin: 0;
    }
  }
  
  .section {
    margin-bottom: 24px;
    
    .section-title {
      font-size: 15px;
      color: #909399;
      padding: 0 20px 8px 20px;
      font-weight: 500;
    }
    
    .card {
      background: #ffffff;
      border-radius: 12px;
      margin: 0 20px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      
      .list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 28px 20px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        
        &:hover {
          background: rgba(0, 0, 0, 0.02);
        }
        
        &:active {
          background: rgba(0, 0, 0, 0.05);
        }
        
        .item-left {
          display: flex;
          align-items: center;
          flex: 1;
          
          .item-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: #606266;
            
            .el-icon {
              font-size: 20px;
            }
          }
          
          .item-label {
            font-size: 15px;
            color: #303133;
            font-weight: 400;
          }
        }
        
        .item-right {
          display: flex;
          align-items: center;
          gap: 8px;
          
          .item-value {
            font-size: 14px;
            color: #909399;
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          
          .arrow-icon {
            font-size: 16px;
            color: #c0c4cc;
          }
        }
      }
      
      .divider {
        height: 1px;
        background: #f0f0f0;
        margin: 0 20px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .account-info-page {
    .account-header {
      padding: 12px 0 20px 0;
      
      .page-title {
        font-size: 20px;
      }
    }
    
    .section {
      margin-bottom: 20px;
      
      .card {
        margin: 0 16px;
        border-radius: 10px;
        
        .list-item {
          padding: 24px 16px;
          
          .item-left {
            .item-icon {
              width: 22px;
              height: 22px;
              margin-right: 10px;
              
              .el-icon {
                font-size: 18px;
              }
            }
            
            .item-label {
              font-size: 14px;
            }
          }
          
          .item-right {
            .item-value {
              font-size: 13px;
              max-width: 120px;
            }
          }
        }
        
        .divider {
          margin: 0 16px;
        }
      }
    }
  }
}
</style>
